revision:
<div class="container">
<div class="date-container">
<span id="date">01/01/2014</span>,
<span id="day">Sunday</span>
</div>
<div class="time">
<span id="hour">00</span>
<span class="blink-colon">:</span>
<span id="minute">00</span>
<span class="blink-colon">:</span>
<span id="second">00</span>
</div>
</div>
<style>
.container {border: 1vw solid brown; width: 30vw; height: 30vw; display: flex; justify-content: center;align-items: center; flex-direction: column; color:seagreen; font-size: 3vw;
border-radius: 50%; background: rgb(36, 37, 51); box-shadow:0 0 1.2vw rgba(0,240,240,0.3), 0 0 1.2vw rgba(0,0,0,0.4) inset; margin: 0 auto;}
.blink-colon {animation: blink 1s infinite; }
@keyframes blink {
0%, 100% {opacity: 1;}
30% {opacity: 0.4; }
}
.date-container {margin-top: 0.6vw; font-size: 1.5vw; color: rgba(255,255,255,0.8);}
</style>
<script>
window.onload = function () {
setInterval(updateTime, 1000);
};
function updateTime() {
//Clock Time
const hourEL = document.querySelector("#hour");
const minuteEL = document.querySelector("#minute");
const secondEL = document.querySelector("#second");
let d = new Date();
let hours = d.getHours();
let minutes = d.getMinutes();
let seconds = d.getSeconds();
if (hours >= 0 && hours <= 9) hours = "0" + hours;
if (minutes >= 0 && minutes <= 9) minutes = "0" + minutes;
if (seconds >= 0 && seconds <= 9) seconds = "0" + seconds;
hourEL.innerHTML = hours;
minuteEL.innerHTML = minutes;
secondEL.innerHTML = seconds;
// Clock Date
const dateEl = document.querySelector("#date");
let date = d.getDate();
if (date >= 0 && date <= 9) date = "0" + date;
let month = d.getMonth()+1;
if (month >= 0 && month <= 9) month = "0" + month;
let year = d.getFullYear();
if (year >= 0 && year <= 9) year = "0" + year;
dateEl.innerHTML = `${date}/${month}/${year}`;
// Clock Day
const dayEL = document.querySelector("#day");
let daynumber = d.getDay();
let day = "";
switch (daynumber) {
case 0: day = "Sunday"; break;
case 1: day = "Monday"; break;
case 2: day = "Tuesday"; break;
case 3: day = "Wednesday"; break;
case 4: day = "Thursday"; break;
case 5: day = "Friday"; break;
case 6: day = "Saturday"; break;
}
dayEL.innerHTML = day;
}
</script>